<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://shiro.apache.org/tags" prefix="shiro" %>
<c:set var="contextPath" value="${pageContext.request.contextPath}"></c:set>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>对账管理 -- 订单清算</title>
    <link rel="stylesheet" href="${contextPath}/static/statistics/css/bootstrap.min.css">
    <link rel="stylesheet" href="${contextPath}/static/statistics/css/bootstrap-datetimepicker.min.css">
    <link rel="stylesheet" href="${contextPath}/static/layer/css/layui.css">
    <script src="${contextPath}/static/statistics/js/jquery.js"></script>
    <script src="${contextPath}/static/statistics/js/bootstrap.min.js"></script>
    <script src="${contextPath}/static/statistics/js/bootstrap-datetimepicker.min.js"></script>
    <script src="${contextPath}/static/statistics/js/bootstrap-datetimepicker.fr.js"></script>
    <script src="${contextPath}/static/statistics/js/bootstrap-datetimepicker.zh-CN.js"></script>
    <script src="${contextPath}/static/statistics/js/bootstrap.min.js"></script>
    <script src="${contextPath}/static/statistics/js/vue.js"></script>
    <script src="${contextPath}/static/statistics/js/echarts.min.js"></script>
    <script type="text/javascript" src="${contextPath}/static/statistics/js/jquery.mockjax.js"></script>
    <script type="text/javascript" src="${contextPath}/static/statistics/js/jquery.autocomplete.js"></script>
    <style>
        .autocomplete-suggestions {
            border: 1px solid #999;
            background: #FFF;
            overflow: auto;
        }

        .autocomplete-suggestion {
            padding: 2px 5px;
            white-space: nowrap;
            overflow: hidden;
        }

        .autocomplete-selected {
            background: #F0F0F0;
        }

        .autocomplete-suggestions strong {
            font-weight: normal;
            color: #3399FF;
        }
    </style>
</head>
<body style="background: rgba(119, 118, 118, 0.15);">
<div class="container-fluid" id="app">
    <div class="row" style="text-align: right;margin-top: 5px;">
        <div class="col-sm-12">
            <span>银联对账状态：</span><span :style="reconciliation.uPayDZStateStyle">{{reconciliation.uPayDZState}}</span>
            <span>对账描述：</span><span :style="reconciliation.uPayDZStateStyle">{{reconciliation.uPayDZStateStr}}</span>
        </div>
        <div class="col-sm-12">
            <span>微信支付宝对账状态：</span><span
                :style="reconciliation.WXZFBDZStateStyle">{{reconciliation.WXZFBDZState}}</span>
            <span>对账描述：</span><span :style="reconciliation.WXZFBDZStateStyle">{{reconciliation.WXZFBDZStateStr}}</span>
        </div>
    </div>

    <form class="form-inline" style="margin-top: 5px; margin-bottom: 5px;text-align: right">
        <%--<div class="form-group">
            <select class="form-control" id="tbcocompNameInput" style="width: 150px">
                <option value="">—烟草公司名称—</option>
            </select>
        </div>
        <div class="form-group">
            <select class="form-control" id="bankNameInput" style="width: 150px">
                <option value="">—收单行名称—</option>
            </select>
        </div>
        <div class="form-group">
            <select class="form-control" id="merNameInput" style="width: 150px">
                <option value="">—商户号名称—</option>
            </select>
        </div>
        <div class="form-group">
            <select class="form-control" style="width: 150px" id="payTypeSelect">
                <option value="">—交易类型—</option>
                <option value="0">支付</option>
                <option value="1">退货</option>
            </select>
        </div>
        <div class="form-group">
            <input type="text" class="form-control" id="settleDateInput" placeholder="清算日期">
        </div>--%>
        <%-- <button type="button" class="btn btn-success" onclick="queryOrder();">查询</button>
         <button type="button" title="根据查询条件导出所有记录" onclick="exportExcel();"
                 class="btn btn-info">导出Excel
         </button>--%>
        <button type="button" class="btn btn-success btn-sm" v-on:click="clearing()">清算</button>
        <button type="button" class="btn btn-info btn-sm" v-on:click="selectClearingState()">清算查询</button>
        <button type="button" class="btn btn-warning btn-sm" v-on:click="getOrder()">刷新表格</button>

    </form>
    <div class="row" style="background-color: rgb(0, 0, 0);margin-right: 0px;margin-left: 0px; height: 37px;">
        <div class="col-sm-10" style="margin-top: 6px;">
            <strong style="font-size: 18px;color: #f9f9f9;">订单清算</strong>
        </div>
        <div class="col-sm-2" style="text-align: right">
            <img style="height: 20px;margin-top: 9px;"
                 src="">
        </div>
    </div>
    <div class="table-responsive" id="tableContainer" style="height: 410px">
        <table class="table table-striped table-condensed table-bordered">
            <thead style="background-color:#eee;">
            <tr>

                <th>选择</th>
                <th>用户姓名</th>
                <th>商户号</th>
                <th>订单时间</th>
                <th>交易金额(元)</th>
                <th>清算金额(元)</th>
                <th>清算卡姓名</th>
                <th>清算卡卡号</th>
                <th>身份证号</th>
                <th>支付类型</th>
                <th>清算方式</th>
                <th>订单笔数</th>
                <th>清算订单号</th>
                <%--<th>清算代码</th>--%>
                <th>清算信息</th>
            </tr>
            </thead>
            <tbody>

            <tr v-for="(order,index) in orderList">
                <td style="text-align: center;">
                    <input type="checkbox" :disabled="disabledCheckbox" name="orderIndex" :value="index"
                           v-model="checkedOrderIndexs"/>
                </td>
                <td>{{order.userName}}</td>
                <td>{{order.merId}}</td>
                <td>{{order.createTime}}</td>
                <td>{{(order.txnAmt/100).toFixed(2)}}</td>
                <td>{{(order.rateAmt/100).toFixed(2)}}</td>
                <td>{{order.cardHolder}}</td>
                <td>{{formatIdCar(order.bankCardNo)}}</td>
                <td>{{formatIdCar(order.idCarNo)}}</td>
                <td>{{transType(order.transType)}}</td>
                <td>{{clearingType(order.clearingType)}}</td>
                <td>{{order.orderCount}}</td>
                <td>{{order.orderId}}</td>
                <%--<td>{{order.clearingCode}}</td>--%>
                <td>{{order.clearingMsg}}</td>
            </tr>
            </tbody>
        </table>
    </div>

    <%--<div style="text-align: right;margin-top: 10px;" id="pageDiv"></div>--%>
</div>

<form action="${contextPath}/checking/checkingDetailPage" method="post" target="_blank" id="goToDetailPage"
      style="display:none">
    <textarea type="hidden" id="goToDetailPageData" name="rowData"></textarea>
</form>
<form action="${contextPath}/checking/exportExcel" method="post" id="exportExcel" style="display:none">
    <input type="hidden" name="tbcocompName" id="exportExcelParamTbcocompName">
    <input type="hidden" name="bankName" id="exportExcelParamBankName">
    <input type="hidden" name="merName" id="exportExcelParamMerName">
    <input type="hidden" name="settleDate" id="exportExcelParamSettleDate">
    <input type="hidden" name="payType" id="exportExcelParamPayType">
    <input type="hidden" name="tableType" value="general">
</form>
</body>
<script src=${contextPath}/static/layer/layui.all.js></script>
<script type="text/javascript">
    var laypage = layui.laypage
        , layer = layui.layer;

    /*v-model="queryModel.tbcocompName"
     queryModel可以放在vue里面，做到双向数据绑定，mvc模式*/
    var app = new Vue({
        el: '#app',
        data: {
            orderList: [],
            queryModel: {},
            reconciliation: { //对账信息
                uPayDZStateStyle: {color: 'red'},
                WXZFBDZStateStyle: {color: 'red'},
                uPayDZState: "失败",
                uPayDZStateStr: "暂未对账",
                WXZFBDZState: "失败",
                WXZFBDZStateStr: "暂未对账",

            },
            checkedOrderIndexs: [],
            disabledCheckbox: false,
        },
        computed: {},
        methods: {
            goToDetail: function (index) {
                var order = this.orderList[index]
                $("#goToDetailPageData").val(JSON.stringify(order))
                $("#goToDetailPage").submit()
            },
            getOrder: function () {
                layer.load(1)
                $.ajax({
                    url: '${contextPath}/clearing/selectNotClearingOrder',
                    type: 'post',
                    data: this.queryModel,
                    success: function (data) {
                        layer.closeAll('loading');
                        if (data.success == false) {
                            layer.msg("获取出错：" + data.message)
                            return
                        }
                        var dataArray = data.data;
                        if (dataArray.length == 0) {
                            layer.msg("查询没有数据")
                        }
                        app.orderList = dataArray
                    },
                    error: function (error) {
                        layer.closeAll('loading');
                        //console.log(error)
                    }
                })
            },
            transType: function (type) {
                if (type == 4) {
                    return '微信/支付宝'
                }
                if (type == 3) {
                    return '银联'
                }
                return '未知'
            },
            clearingType: function (type) {
                if (type == 1) {
                    return '0.5元一笔'
                }
                if (type == 2) {
                    return '单笔满300元免手续费'
                }
                return '未知'
            },
            clearing: function () {
                if (this.checkedOrderIndexs.length == 0) {
                    layer.msg("请选择清算数据")
                    return
                }
                var clearingModel = {
                    userName: null,
                    merId: null,
                    userId: null,
                    txnAmt: 0,
                    rateAmt: 0,
                    cardHolder: null,
                    bankCardNo: null,
                    idCarNo: null,
                    transType: null,
                    clearingType: null,
                    orderCount: 0,
                    createTime: '',

                }


                for (var index in this.checkedOrderIndexs) {
                    var order = this.orderList[this.checkedOrderIndexs[index]];
                    if (!order.bankCardNo) {
                        layer.msg('用户没有有效银行卡，请联系客户绑定')
                        return;
                    }
                    if (order.clearingCode == '00' || order.clearingCode == 'A2' || order.clearingCode == 'A4' || order.clearingCode == 'A5' || order.clearingCode == 'A6' || order.clearingCode == 'ZC') {
                        layer.msg("所选清算数据存在不能清算数据")
                        return;
                    }
                    if (clearingModel.userId != null && (clearingModel.userId != order.userId || clearingModel.transType != order.transType)) {
                        layer.msg("所选清算数据不能同时清算")
                        return;
                    }

                    clearingModel.userId = order.userId;
                    clearingModel.userName = order.userName;
                    clearingModel.merId = order.merId;
                    clearingModel.txnAmt = clearingModel.txnAmt + new Number(order.txnAmt);
                    clearingModel.rateAmt = clearingModel.rateAmt + new Number(order.rateAmt);
                    clearingModel.cardHolder = order.cardHolder;
                    clearingModel.bankCardNo = order.bankCardNo;
                    clearingModel.idCarNo = order.idCarNo;

                    clearingModel.transType = order.transType;

                    clearingModel.clearingType = order.clearingType;
                    clearingModel.orderCount = clearingModel.orderCount + order.orderCount;
                    if (clearingModel.createTime == '') {
                        clearingModel.createTime = order.createTime;
                    } else {
                        clearingModel.createTime = clearingModel.createTime + ',' + order.createTime
                    }
                }

                if (clearingModel.transType == '4') { //微信支付宝
                    if (this.reconciliation.WXZFBDZState != "成功") {
                        //layer.msg("微信支付宝对账处于失败状态，请先处理");
                       // return;
                    }
                } else { //银联
                    if (this.reconciliation.uPayDZState != "成功") {
                        //layer.msg("银联对账处于失败状态，请先处理");
                        //return;
                    }
                }

                var content = "用户：" + clearingModel.userName +
                    "<br>清算卡姓名：" + clearingModel.cardHolder +
                    "<br>身份证号：" + this.formatIdCar(clearingModel.idCarNo) +
                    "<br>清算卡号：" + this.formatIdCar(clearingModel.bankCardNo) +
                    "<br>支付类型：" + this.transType(clearingModel.transType) +
                    "<br>清算类型：" + this.clearingType(clearingModel.clearingType) +
                    "<br>支付金额：" + (clearingModel.txnAmt / 100).toFixed(2) + "元" +
                    "<br>清算金额：" + (clearingModel.rateAmt / 100).toFixed(2) + "元" +
                    "<br>支付笔数：" + clearingModel.orderCount + "笔" +
                    "<br>订单日期：" + clearingModel.createTime;
                layer.confirm(content, {
                    btn: ['确定', '取消'] //按钮
                }, function () {
                    layer.load(1);
                    $.ajax({
                        url: '${contextPath}/clearing/minShengClearing',
                        type: 'post',
                        data: clearingModel,
                        dataType: 'json',
                        success: function (data) {
                            //console.log(data)

                            if (data.success) {
                                layer.msg('代付申请提交成功', {icon: 1});
                                app.getOrder()
                            } else {
                                layer.msg(data.message);
                            }
                            layer.closeAll('loading');

                        },
                        error: function (error) {
                            //console.log(error)
                            layer.msg('网路错误');
                            layer.closeAll('loading');
                        }
                    })


                }, function () {

                });
            },
            formatIdCar: function (id) {
                if (!id) return '';
                var qSi = id.substr(0, 4);
                var hSi = id.substr(id.length - 4)
                var zLength = id.substr(4, id.length - 8).length
                var xL = ''
                for (var i = 0; i < zLength; i++) {
                    xL = xL + '*'
                }
                return qSi + xL + hSi;
            },
            selectClearingState: function () {
                if (this.checkedOrderIndexs.length == 0) {
                    layer.msg("请选择清算数据")
                    return
                }
                if (this.checkedOrderIndexs.length > 1) {
                    layer.msg("请只选择一条数据")
                    return
                }
                var orderId
                var transType

                for (var index in this.checkedOrderIndexs) {
                    var order = this.orderList[this.checkedOrderIndexs[index]]
                    if (order.orderId == null) {
                        layer.msg("所选清算数据还未清算")
                        return;
                    }
                    if (order.clearingCode != '00' && order.clearingCode != 'ZC') {
                        layer.msg("所选清算数据状态已确认");
                        return;
                    }
                    orderId = order.orderId
                    transType = order.transType
                }
                layer.load(1);
                $.ajax({
                    url: '${contextPath}/clearing/queryDaiFuResult',
                    type: 'post',
                    data: {
                        orderId: orderId,
                        transType: transType
                    },
                    dataType: 'json',
                    success: function (data) {
                        if (data.success) {
                            var message = "订单号：" + data.data.orderId +
                                "<br>清算信息：" + data.data.resultDesc;

                            var indx = layer.confirm(message, {btn: ['确定']}, function () {
                                layer.close(indx)
                            });
                            app.getOrder()
                        } else {
                            layer.msg(data.message)
                        }
                        layer.closeAll('loading');
                    },
                    error: function (error) {
                        //console.log(error)
                        layer.msg("网络错误")
                        layer.closeAll('loading');
                    }
                })

            },
            doReconciliation: function () {
                $.ajax({
                    url: '${contextPath}/clearing/reconciliation',
                    dataType: 'json',
                    success: function (data) {
                        if (data.success){
                            var dataObj = data.data
                            if (dataObj.uPay == null) {
                                app.reconciliation. uPayDZStateStyle = {color: 'green'}
                                app.reconciliation. uPayDZState = "成功"
                                app.reconciliation. uPayDZStateStr = "对账正确"
                            } else {
                                app.reconciliation. uPayDZState = "失败"
                                app.reconciliation. uPayDZStateStr = dataObj.uPay.msg
                            }
                            if (dataObj.wxZfb == null) {
                                app.reconciliation. WXZFBDZStateStyle = {color: 'green'}
                                app.reconciliation. WXZFBDZState = "成功"
                                app.reconciliation. WXZFBDZStateStr = "对账正确"
                            } else {
                                app.reconciliation. WXZFBDZState = "失败"
                                app.reconciliation. WXZFBDZStateStr = dataObj.wxZfb.msg
                            }
                            //console.log(dataObj)
                        }else {
                            layer.msg("对账错误：" + data.message)
                        }
                    }
                        ,
                        error: function (error) {
                            layer.closeAll('loading');
                            //console.log(error)
                        }
                    })
            }
        },
        watch: {
            checkedOrderIndexs: function (obj) {
                return
                //console.log(obj)
                if (obj.length == 0) {
                    this.disabledCheckbox = false;
                }
                var firstOrder = obj[this.checkedOrderIndexs[0]]
                var compleOrder = obj[this.currentCheckedindex]
                if (firstOrder.merId = compleOrder.merId) {
                    this.disabledCheckbox = false;
                }
                this.disabledCheckbox = true;
            }
        }
    });
    app.doReconciliation()
    app.getOrder()
</script>
</html>





